<template>
  <div>
    <van-skeleton title :row="15" :loading="isFirst">
      <!-- <PackBack></PackBack> -->
    <!-- 供应商信息 -->
    <div style="background: rgb(241, 241, 241); overflow: hidden">
      <div class="supplier-head myflex">
        <div class="supplier-left">
          <div>
            <van-tag
              color="#ffe1e1"
              text-color="#ad0000"
              style="font-weight: bold"
              >供应商</van-tag
            >
            <span class="weight pdw">{{ supplier?.name }}</span>
          </div>

          <p>
            <span style="font-size: 12px" class="hui">经营种类:</span
            ><van-tag type="primary">{{ supplier?.type }}</van-tag>
          </p>

          <div>
            <span style="font-size: 12px" class="hui"
              >地址:{{ supplier?.address }}</span
            >
          </div>
        </div>
        <div class="supplier-right">
          <img
            :src="supplier?.logo"
            width="70"
            alt=""
            v-if="supplier?.logo !== null"
          />
          <div
            style="width: 70; height: 70; color: #eee"
            v-if="supplier?.logo === null"
          ></div>
        </div>
      </div>
    </div>
    <!-- 供应商信息 -->

    <!-- 商品列表 -->
    <div>
      <div style="display: flex">
        <div style="min-height: 81vh; border-right: 1px solid #ebedf0;">
          <van-sidebar
            v-model="activeb"
            style="
              --van-sidebar-selected-border-color: red;
              --van-sidebar-selected-border-height: 45px;
              padding: 5px;
             
            "
          >
            <van-sidebar-item
              v-for="item in shopData"
              :key="item.id"
              :title="item.name"
              :badge="item.goods.length"
            />
          </van-sidebar>
        </div>



        <div class="" style="width: 100%; height: 100%">
          <div class="shops">
            <div class="my_divider"></div>



            <!-- 判断数据是否加载完成 如果没加载完成 因为我循环了该数组的属性 就会报undfind -->
            <div v-if="shopData.length !== 0">
              <!-- 全部的商品 -->
              <!-- <div v-if="activeb_top === '0'"> -->
                <div style="overflow-y: scroll;max-height: 80vh;padding-bottom: 70px;box-sizing: border-box;">
              <div v-if="shopData[activeb]?.goods.length !== 0">
                <div
                  class="shop my_divider"
                  v-for="(item, i) in shopData[activeb]?.goods"
                  :key="i"
                >
                  <div class="shop-img">
                    <img
                    @click="()=>{
                          router.push('/shop/home/detail/'+item.id)
                    
                    }"
                      :src="item.photo"
                      alt=""
                      width="70"
                      height="70"
                      style="border-radius: 5px"
                    />
                    <van-tag
                      style="position: absolute; left: 12%; bottom: 5%"
                      type="success"
                      v-if="item.isShelve === 1"
                      >已上架</van-tag
                    >
                    <van-tag
                      style="position: absolute; left: 12%; bottom: 5%"
                      type="warning"
                      v-if="item.isShelve === 0"
                      >未上架</van-tag
                    >
                    <van-tag
                      style="position: absolute; right: 0%; top: 0%"
                      type="success"
                      v-if="item.isTop === 1"
                      >顶</van-tag
                    >
                  </div>
                  <div style="flex: 1; padding: 5px; box-sizing: border-box">
                    <div style="font-size: 14px">{{ item.name }}</div>
                    <div class="hui" style="font-size: 12px">
                      {{ item.specs }}
                    </div>
                    <div class="hui" style="font-size: 12px">
                      销量: {{ item.sales }} ，库存:
                      {{ item.inventory - item.sales }}
                    </div>
                    <div style="font-size: 12px">
                      <div v-if="item.isPromote === 0">
                        <span class="red">￥ {{ item.price }} </span>/份
                      </div>
                      <div v-if="item.isPromote === 1" style="display: flex">
                        <span class="red" style="text-decoration: line-through"
                          >￥ {{ item.price }}
                          <span style="color: #000">/份</span></span
                        >
                        <span class="red mlw"
                          >￥ {{ item.promotePrice }}
                          <span style="color: #000">/份</span></span
                        >
                      </div>
                    </div>
                  </div>
                  <div class="" style="display: flex; align-items: end">
                    <div
                    style="display: flex;"
                      v-if="
                        item.carCount !== 0 && item.inventory - item.sales > 0 
                      "
                    >
                      <div class="iconfont icon-jian1 number"  @click="methods.minusGoodCar(item)"></div>
                      <div
                        class="discount-number plw prw"
                        style="font-size: 16px"
                      >
                        {{ item.carCount }}
                      </div>
                      <div class="iconfont icon-jia number" @click="methods.addGoodCar(item)"></div>
                    </div>

                    <div
                      v-if="
                        item.carCount === 0 && item.inventory - item.sales > 0
                      "
                    >
                      <div class="iconfont icon-jia number" @click="methods.addGoodCar(item)"></div>
                    </div>

                    <div v-if="item.inventory - item.sales <= 0">
                      <van-tag>已售罄</van-tag>
                    </div>
                  </div>
                
                
                
                </div>
              </div>
            </div>

              <div v-if="shopData[activeb]?.goods.length === 0">
                <van-empty description="暂无数据" />
              </div>
              <!-- </div> -->
              <!-- 全部的商品 -->
            </div>
            <!-- <div class="my_divider"></div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->

    <!-- 购物车 -->
    <div class="bottomcar">
      <div style="" class="carbox myflex">
        <div class="car myflex">
          <div
            class="iconfont icon-gouwuche"
            style="font-size: 22px; margin-left: 20px"
          >
            <van-badge
              :content="likeShop.count"
              style="position: relative; bottom: 18px"
            >
              <div class="child"></div>
            </van-badge>
          </div>
          <div style="margin-right: 1.5rem">
            合计:
            <span style="font-size: 18px; font-weight: bold"
              >￥{{ likeShop.price.toFixed(2) }}</span
            >
          </div>
        </div>
        <van-button class="car-btn" @click="router.push('/shop/home/buy')"> 去结算 </van-button>
      </div>
    </div>
    <!-- 购物车 -->
  </van-skeleton>
  </div>
</template>

<script setup>
import { getMerchant } from "@/api/good";
import { onMounted, ref,provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import PackBack from '@/components/PageBack.vue'
const parentMessage = '供应商'; // 父组件数据
provide('mytitle', parentMessage); // 提供数据给子组件
const { params } = useRoute();
const supplier = ref(); //商户信息
const shopData = ref([]); //商品信息
const activeb = ref(0); //商品 纵向切换
const shopCar = ref([]); //当前页面购物车
const ids = ref([]); //购物车所有商品id
const router=useRouter();
const isFirst=ref(true);
const likeShop = ref({
  price: 0,
  count: 0,
}); //购物车总数量和价格

const methods = {
  //更新页面数据
  updateData: (item) => {
    //所有缓存已有的商品的id
    const carIds = ids.value.map((d) => d.id);
    console.log(carIds,"在购物车的id",item);

    item.value.map((d, i) => {
      // if (carIds.includes(d.id)) {
      //   console.log(1111111111111111111111111,d.id);
      //   const arr = ids.value.find((e) => e.id === d.id);
      //   d.carCount = arr.carCount;
      // } else {
      //   d.carCount = 0;
      // }
      //这个页面因为有子集所以需要改变成这个方案 
      d.goods.map((e)=>{
        if (carIds.includes(e.id)) {
        const arr = ids.value.find((f) => f.id === e.id);
        e.carCount = arr.carCount;
      } else {
        e.carCount = 0;
      }
      })



    });
  },
  //更新购物车数据
  save: (shop) => {
    const result = shop.value.find((d) => d.carCount === 0);
    if (result) {
      shop.value.map((d, i) => {
        if (d.carCount === 0) {
          shop.value.splice(i, 1);
        }
      });
    }
    //存入最新数据
    localStorage.setItem("shopCar", JSON.stringify(shop.value));

    //更新数据
    shopCar.value = JSON.parse(localStorage.getItem("shopCar"));

    likeShop.value.price = 0;
    likeShop.value.count = 0;
    shopCar.value.map((d) => {
      if (d.isPromote === 1) {
        likeShop.value.price += d.promotePrice * d.carCount;
      }

      if (d.isPromote === 0) {
        likeShop.value.price += d.price * d.carCount;
      }
      likeShop.value.count += d.carCount;
    });
  },
  //购物车新增
  addGoodCar: (item) => {
    //查看购物车是否已经存在
    const result = shopCar.value.find((d) => d.id === item.id);
    if (result) {
      //已经存在，数量+1
      shopCar.value.map((d) => {
        if (item.id === d.id) {
          d.carCount += 1;

          //更新id库中的数据
          ids.value.map((e) => {
            if (e.id === d.id) {
              e.carCount += 1;
            }
          });
        }
      });
    }

    if (!result) {
      //不存在，添加进购物车
      shopCar.value.push({ ...item, carCount: 1 });
      ids.value.push({ id: item.id, carCount: 1 });
    }

    //更新存储数据
    methods.save(shopCar);
    //更新页面数据
    methods.updateData(shopData);
  },

  //购物车减少
  minusGoodCar: (item) => {
    //查看购物车是否已经存在
    const result = shopCar.value.find((d) => d.id === item.id);
    console.log(result, "kkkkkkkkkkkkkkk");
    if (result.carCount >= 1) {
      //已经存在，数量-1
      shopCar.value.map((d) => {
        if (item.id === d.id) {
          d.carCount -= 1;

          //更新id库中的数据
          ids.value.map((e, i) => {
            if (e.id === d.id) {
              e.carCount -= 1;
            }
          });
        }
      });
    }

    //数量为0，在购物车中清除 在ids库中清除
    if (result.carCount === 0) {
      console.log("清除ids");
      shopCar.value.map((d, i) => {
        if (item.id === d.id) {
          shopCar.value.splice(i, 1);
        }
      });
      ids.value.map((d, i) => {
        if (item.id === d.id) {
          ids.value.splice(i, 1);
        }
      });
    }

    //更新存储数据
    methods.save(shopCar);
    //更新页面数据
    methods.updateData(shopData);
  },

  //获取商户信息和商品信息
  getMerchant: async () => {
    const res = await getMerchant({ sid: params.id });
    if (res.result === 0) {
      supplier.value = res.data.supplier;
      shopData.value = res.data.data;
      methods.updateData(shopData);
      isFirst.value=false;
    }
  },
};

onMounted(() => {
  const shopCar_history = localStorage.getItem("shopCar");
  //符合条件即为不需要初始化购物车
  if (shopCar_history !== "" && shopCar_history !== null) {
    //不需要初始化购物车，将历史购物车赋值当前页面
    //缓存中的购物车
    const cars = JSON.parse(shopCar_history);
    cars.map((d) => {
      if (d.isPromote === 1) {
        likeShop.value.price += d.promotePrice * d.carCount;
      }

      if (d.isPromote === 0) {
        likeShop.value.price += d.price * d.carCount;
      }
      likeShop.value.count += d.carCount;
    });

    //赋值给本地的购物车
    shopCar.value = cars;
    //赋值给本地的购物车id和数量
    ids.value = cars.map((d) => ({ id: d.id, carCount: d.carCount }));
  } else {
    //初始化购物车
    localStorage.setItem("shopCar", JSON.stringify([]));
  }

  methods.getMerchant();
});
</script>

<style  scoped>
/* 购物车start */
/* 右侧去结算按钮 */
.car-btn {
  flex: 2;
  height: 100%;
  background: #f04516;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  border: none;
  border-radius: 0px 50px 50px 0px;
}

/* 购物车整个盒子 */
.carbox {
  height: 40px;
  margin: auto;
  position: relative;
  margin-bottom: 10px;
  width: 96%;
}
.bottomcar {
  position: fixed;
  width: 100%;
  bottom: 0px;
  /* background: #fff; */
}
/* 购物车左侧 */
.car {
  flex: 8;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 12px;
  border-radius: 50px 0px 0px 50px;
  background: linear-gradient(to right, #e97f08, #ea8012);
}
/* .discount-number{
  font-size: 14px !important;
} */
/* 购物车end */

.supplier-head {
  display: flex;
  justify-content: space-between;
  margin: 4px;
  height: 6.5rem;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

.supplier-head p {
  margin: 5px;
}

.number {
  color: red;
  font-size: 18px;
}

/* 下面是商品管理页面的样式 */

.contenttwo {
  padding: 30px 0px 250px;
  box-sizing: border-box;
}

/* 补货弹出框样式 */
.content {
  padding: 30px 15px 250px;
  box-sizing: border-box;
}

.dialog_flex {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

/* 底部管理分类/新增商品按钮 */
.btn_bottom {
  position: fixed;
  width: 100vw;
  bottom: 0;
  padding-bottom: 50px;
  background: #ffffff;
}
.shop {
  display: flex;
  padding: 5px 5px 5px 10px;
}
.shop-img {
  position: relative;
}
.topData {
  height: 60px;
  background: #faebd7;
}
</style>